<template>
  <div>
    <!-- 导航栏 -->
    <div class="lx_nav">
      <div class="lx_nav_left">
        <van-icon name="arrow-left" size="23" onclick="history.back()" />
      </div>
      <div class="lx_nav_right">新增地址</div>
    </div>
    <!-- 添加表单 -->
    <div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="name"
            name="name"
            label="收货人"
            placeholder="请填写收货人姓名"
            :rules="[{ required: true, message: '请填写收货人姓名' }]"
          />
          <van-field
            v-model="sj"
            name="sj"
            label="联系手机"
            placeholder="请填写联系手机"
            :rules="[{ required: true, message: '请填写联系手机' }]"
          />
          <van-field
            v-model="result"
            is-link
            readonly
            name="dz"
            label="地区选择"
            placeholder="点击选择省市区"
            @click="showArea = true"
          />
          <van-popup v-model:show="showArea" position="bottom">
            <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
          </van-popup>

          <van-field
            v-model="dz"
            name="dzs"
            label="详细地址"
            placeholder="街道/楼牌号等"
            :rules="[{ required: true, message: '请填写详细地址' }]"
          />

          <van-field name="flag" label="设为默认">
            <template #input>
              <van-switch v-model="checked" />
            </template>
          </van-field>
          <van-cell-group inset>
            <van-field
              v-model="message"
              rows="2"
              autosize
              label="智能获取地址"
              type="textarea"
              maxlength="50"
              placeholder="请输入地址信息"
              show-word-limit
            />
            <van-button class="button" type="primary" size="small" @click="qk">清空</van-button>
            <van-button class="button" type="primary" size="small" @click="sb">识别</van-button>
          </van-cell-group>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button class="button" round block type="primary" native-type="submit"> 提交 </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { areaList } from '@vant/area-data'
import { useRouter } from 'vue-router'
import axios from 'axios'
const router = useRouter()

const name = ref('')
const sj = ref('')
const dz = ref('')
const result = ref('')
const checked = ref(false)
const message = ref('')
const onSubmit = async (values) => {
  router.push('/daddress')
  await axios.post('http://localhost:3000/yzp/address', values)
}

const showArea = ref(false)
const onConfirm = ({ selectedOptions }) => {
  showArea.value = false
  result.value = selectedOptions.map((item) => item.text).join('/')
}
// 清空
const qk = () => {
  message.value = ''
}
// 智能识别
const sb = async () => {
  let data = await axios.post('http://localhost:3000/yzp/zndz', { body: message.value })
  console.log(data.data)
  name.value = data.data.data.person
  sj.value = data.data.data.phonenum
  result.value = data.data.data.province + '/' + data.data.data.city + '/' + data.data.data.county
  dz.value =
    data.data.data.province +
    data.data.data.city +
    data.data.data.county +
    data.data.data.town +
    data.data.data.detail
}
</script>

<style scoped>
.lx_login {
  width: 100vw;
  height: 100vh;
}

.lx_nav {
  width: 100%;
  height: 50px;
  display: flex;
  border-bottom: 1px solid #ccc;
}

.lx_nav_left {
  width: 50px;
  height: 30px;
  margin-left: 30px;
  margin-top: 14px;
}

.lx_nav_right {
  width: 310px;
  height: 50px;
  font-size: 18px;
  margin-left: 100px;
  line-height: 50px;
}
.button{
     background: rgb(53, 221, 142);
     border: 0;
}
</style>